<template>
  <div class="list-common-table">
    <t-table
      row-key="index"
      :sort="sort"
      :data="list"
      :columns="columns"
      :pagination="pagination"
      cell-empty-content="-"
      hover
      lazy-load
      @sort-change="sortChange"
    >
      <template #operation="{ row }">
        <t-space>
          <t-link theme="primary" @click="onEditDetail(row)"> {{ $t('edit') }}</t-link>
          <t-popconfirm :content="$t('confirmDelete')" @confirm="onDelete(row)">
            <t-link theme="primary"> {{ $t('delete') }}</t-link>
          </t-popconfirm>
        </t-space>
      </template>
    </t-table>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, toRefs, watch } from 'vue';
import { useRouter } from 'vue-router';

import { ApiSiteDelete, ApiSiteList } from '@/api/api';
import { t } from '@/locales';

const props = defineProps({
  // 关键字
  keyword: {
    type: String,
    default: '',
  },
  // 分类ID
  groupId: {
    type: Number,
    default: 0,
  },
});

const { keyword, groupId } = toRefs(props);
watch(keyword, () => {
  getApiSourceList();
});
watch(groupId, () => {
  getApiSourceList();
});

const list = ref();

const columns = ref([
  { colKey: 'id', title: 'ID', width: '80', sorter: true },
  { colKey: 'version', title: t('pages.source.table.version'), width: '100' },
  { colKey: 'siteName', title: t('pages.source.table.siteName') },
  { colKey: 'url', title: t('pages.source.table.url') },
  {
    colKey: 'time',
    title: t('createTime'),
    width: '200',
    cell: (h, { row }) => {
      return row.time > 0 ? dayjs(row.time).format('YYYY-MM-DD HH:mm:ss') : '-';
    },
  },
  { colKey: 'operation', title: t('operation'), width: '200', fixed: 'right' },
]);

const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 50,
  total: 0,
});

// 排序
const sort = ref({
  sortBy: 'id',
  descending: true,
});

// 排序事件
const sortChange = (val: any) => {
  if (val) {
    sort.value = val;
  }

  list.value = list.value
    .concat()
    .sort((a: any, b: any) =>
      sort.value.descending ? b[sort.value.sortBy] - a[sort.value.sortBy] : a[sort.value.sortBy] - b[sort.value.sortBy],
    );
};

// 跳转编辑详情页
const router = useRouter();
const onEditDetail = (row: any) => {
  router.push(`/source/edit?id=${row.id}`);
};

// 删除源
const onDelete = (row: any) => {
  ApiSiteDelete(row.id).then((data) => {
    if (data) {
      // 刷新列表
      getApiSourceList();
    }
  });
};

function getApiSourceList() {
  ApiSiteList({
    keyword: keyword.value,
    groupId: groupId.value,
  }).then((data) => {
    list.value = data;
    sortChange('');
    pagination.value.total = data.length;
  });
}

getApiSourceList();
</script>

<style scoped lang="less">
.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  border-radius: var(--td-radius-medium);

  .table-container {
    margin-top: var(--td-comp-margin-xxl);
  }
}
</style>
